<template>
	<div class="headerbox">
		<div class="header">
			<div class="headerL">
				<a @click="goBack" class="goback"><img src="@/assets/picture/goback.png" /></a>
			</div>
			<div class="headerC">
				<p>
					购物车
					<span v-if="cartList && cartList.length > 0">({{ selectedProducts.length }})</span>
				</p>
			</div>
			<div class="headerR"></div>
		</div>
	</div>
	<div class="clear"></div>
	<div class="hbox"></div>
	<div class="kbox"></div>
	<div class="gwcbox">
		<div class="gwcbox_1">
			<div class="clear"></div>
			<div class="gwc1_2">
				<div class="gwcone" v-for="(order, index) in cartList" :key="index">
					<div class="go1"><input type="checkbox" class="gwccheck" v-model="order.selected"
							@click="isSelecteds(order.productId)" /></div>
					<div class="go2">
						<a><img src="@/assets/picture/22.png" /></a>
					</div>
					<div class="go3">
						<div class="go3_1">
							<a>
								<p class="p1">{{ order.name }}</p>
							</a>
						</div>
						<div class="go3_2">
							<p class="p4">￥{{ order.pay }}</p>
						</div>
						<div class="go3_3">
							<div class="num1" @click="dec(index)">-</div>
							<div class="num2">{{ order.buyNum }}</div>
							<div class="num3" @click="add(index)">+</div>
							<div class="del" @click="del(index)"><img src="@/assets/picture/del.png" /></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="fbox1"></div>
	<div class="hejiBox" v-if="cartList && cartList.length > 0">
		<div class="heji">
			<div class="heji_1"><input type="checkbox" class="gwccheck" v-model="selectAll"
					@change="selectAllProducts" /></div>
			<div class="heji_2">全选</div>
			<div class="heji_3">
				<p>
					合计：
					<span>￥{{ totalPrice }}</span>
				</p>
			</div>
			<div class="heji_5">
				<a @click="goToPayment">去结算({{ selectedProducts.length }})</a>
			</div>
		</div>
	</div>
	<Footer />
	<div v-if="tip" class="tip-layer">
		<div class="tip">{{ tipContent }}</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import {
		showTips
	} from '@/assets/js/common.js';
	import Footer from '@/components/footer/index.vue';

	export default {
		name: 'gwc',
		components: {
			Footer
		},
		props: {
			msg: String
		},
		data() {
			return {
				httpUrl: 'http://qgm1.fengjian123.com/service9501/',
				tipContent: '',
				tip: 0,
				cartList: [],
				selectAll: false,
				userData: '',
			};
		},
		mounted() {
			this.isLogin();
		},
		computed: {
			selectedProducts() {
				return this.cartList.filter(item => item.selected);
			},
			totalPrice() {
				return this.selectedProducts.reduce((acc, item) => acc + item.pay, 0);
			}
		},
		methods: {
			isLogin() {
				const sessionData = window.sessionStorage.getItem('users');
				if (!sessionData) {
					this.$router.push('/login');
					console.log('登录失效');
					return;
				}

				const userData = JSON.parse(sessionData);
				this.userData = userData;
				this.cartList = JSON.parse(window.sessionStorage.getItem('cart_' + userData.id));
			},
			goBack() {
				this.$router.go(-1);
			},
			add(index) {
				this.cartList[index].buyNum++;
				this.cartList[index].pay = this.cartList[index].buyNum * this.cartList[index].price; // 更新订单金额
				this.updateCart();
			},
			dec(index) {
				if (this.cartList[index].buyNum > 1) {
					this.cartList[index].buyNum--;
					this.cartList[index].pay = this.cartList[index].buyNum * this.cartList[index].price; // 更新订单金额
					this.updateCart();
				}
			},
			del(index) {
				this.cartList.splice(index, 1);
				this.updateCart();
			},
			updateCart() {
				sessionStorage.setItem('cart_' + this.userData.id, JSON.stringify(this.cartList));
			},
			isSelecteds(productId) {
				const existingItem = this.cartList.find(item => item.productId === productId);
				if (existingItem) {
					existingItem.selected = !existingItem.selected;
				}
				this.updateCart();
			},
			goToPayment() {
				const productData = {
					productList: this.selectedProducts.map(item => ({
						productId: item.productId,
						buyNum: item.buyNum
					})),
					is_sale: 0,
					is_now: 0,
				};

				sessionStorage.setItem('productData_' + this.userData.id, JSON.stringify(productData));
				this.$router.push('/jiesuan');
			},
			selectAllProducts() {
				this.cartList.forEach(item => {
					item.selected = this.selectAll;
					if (this.selectAll) {
						item.pay = item.buyNum * item.price; // 更新订单金额
					} else {
						item.pay = 0; // 如果取消全选，将订单金额置零
					}
				});
				this.updateCart();
			},
		}
	};
</script>

<style>
	@import url('@/assets/css/style.css');
</style>